'use client'

import { useState } from 'react'
import { useRouter } from 'next/navigation'
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { toast } from "sonner"

export default function LoginPage() {
  const router = useRouter()
  const [formData, setFormData] = useState({
    adminId: '',
    adminPassword: '',
    teacherId: '',
    teacherPassword: '',
    studentId: '',
    studentPassword: ''
  })

  const handleLogin = (role: string, id: string, password: string) => {
    // 验证账号和密码
    const validCredentials = {
      admin: { id: 'admin', password: '123' },
      teacher: { id: 'teacher', password: '123' },
      student: { id: 'student', password: '123' }
    }

    if (id === validCredentials[role].id && password === validCredentials[role].password) {
      // 登录成功，跳转到相应页面
      router.push(`/${role}`)
      toast.success('登录成功')
    } else {
      // 登录失败，显示错误消息
      toast.error('账号或密码错误')
    }
  }

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { id, value } = e.target
    setFormData(prev => ({
      ...prev,
      [id]: value
    }))
  }

  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-50">
      <Card className="w-[400px]">
        <CardHeader>
          <CardTitle className="text-2xl text-center">教务管理系统</CardTitle>
          <CardDescription className="text-center">请选择您的身份并登录</CardDescription>
        </CardHeader>
        <CardContent>
          <Tabs defaultValue="admin" className="w-full">
            <TabsList className="grid w-full grid-cols-3">
              <TabsTrigger value="admin">教务</TabsTrigger>
              <TabsTrigger value="teacher">教师</TabsTrigger>
              <TabsTrigger value="student">学生</TabsTrigger>
            </TabsList>
            <TabsContent value="admin">
              <form className="space-y-4" onSubmit={(e) => {
                e.preventDefault()
                handleLogin('admin', formData.adminId, formData.adminPassword)
              }}>
                <div className="space-y-2">
                  <Label htmlFor="adminId">工号</Label>
                  <Input 
                    id="adminId" 
                    placeholder="请输入工号 (admin)" 
                    value={formData.adminId}
                    onChange={handleInputChange}
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="adminPassword">密码</Label>
                  <Input 
                    id="adminPassword" 
                    type="password" 
                    placeholder="请输入密码 (123)"
                    value={formData.adminPassword}
                    onChange={handleInputChange}
                  />
                </div>
                <Button className="w-full" type="submit">登录</Button>
              </form>
            </TabsContent>
            <TabsContent value="teacher">
              <form className="space-y-4" onSubmit={(e) => {
                e.preventDefault()
                handleLogin('teacher', formData.teacherId, formData.teacherPassword)
              }}>
                <div className="space-y-2">
                  <Label htmlFor="teacherId">工号</Label>
                  <Input 
                    id="teacherId" 
                    placeholder="请输入工号 (teacher)"
                    value={formData.teacherId}
                    onChange={handleInputChange}
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="teacherPassword">密码</Label>
                  <Input 
                    id="teacherPassword" 
                    type="password" 
                    placeholder="请输入密码 (123)"
                    value={formData.teacherPassword}
                    onChange={handleInputChange}
                  />
                </div>
                <Button className="w-full" type="submit">登录</Button>
              </form>
            </TabsContent>
            <TabsContent value="student">
              <form className="space-y-4" onSubmit={(e) => {
                e.preventDefault()
                handleLogin('student', formData.studentId, formData.studentPassword)
              }}>
                <div className="space-y-2">
                  <Label htmlFor="studentId">学号</Label>
                  <Input 
                    id="studentId" 
                    placeholder="请输入学号 (student)"
                    value={formData.studentId}
                    onChange={handleInputChange}
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="studentPassword">密码</Label>
                  <Input 
                    id="studentPassword" 
                    type="password" 
                    placeholder="请输入密码 (123)"
                    value={formData.studentPassword}
                    onChange={handleInputChange}
                  />
                </div>
                <Button className="w-full" type="submit">登录</Button>
              </form>
            </TabsContent>
          </Tabs>
        </CardContent>
      </Card>
    </div>
  )
}

